<template>
    <div class="back" v-loading="loading">
        
    
    <div  align="center" >
        <div class="title">
                <span >
                    企业人员管理系统 - 员工修改密码
                </span>
        </div> 
        <div class="box">
                    工号：<el-input v-model="staffNumber" placeholder="请输入工号" class="inputBox" maxlength="11" :disabled="true"></el-input><br>
                    姓名：<el-input v-model="name" placeholder="请输入姓名" class="inputBox" maxlength="50" :disabled="true"></el-input><br>
                    旧密码：<el-input v-model="password" placeholder="请输入旧密码" class="inputBox" maxlength="32" type="password"></el-input><br>
                    新密码：<el-input v-model="newPassword" placeholder="请输入新密码" class="inputBox" maxlength="32" type="password"></el-input><br>
                    重复新密码：<el-input v-model="confirmPassword" placeholder="重复新密码" class="inputBox" maxlength="32" type="password"></el-input><br>
                </div>
                <div style="text-align:center">
                    <span >
                        <el-button style="width:150px;margin-right:3%" @click="backToHome()">返回首页</el-button>
                        <el-button type="primary" style="width:150px" @click="updatePas()">确 定</el-button>
                    </span>
                </div>
                
    </div>
   </div>
</template>

<script>
import { getOneData } from '@/api/table'
import { changePas } from '@/api/table'

   export default {
       data() {
           return {
               loading:false,

               staffNumber:'',
               name:'',
               password:'',
               newPassword:'',
               confirmPassword:'',

           };
       },
       created(){
           this.fetchData()
       },
       methods:{
           backToHome(){
               this.$router.push("/")
           },
           updatePas(){
               if(this.newPassword==null || this.newPassword==''){
                   alert('新密码不可为空')
                   return
               }
               if(this.confirmPassword==null || this.confirmPassword==''){
                   alert('重复新密码不可为空')
                   return 
               }
               changePas({staffNumber:this.staffNumber,password:this.password,newPassword:this.newPassword})
               .then(res=>{
                   this.$message.success(res.data.data)
                   this.$router.push("/")
               })
           },
           fetchData(){
               this.loading=true
                getOneData({staffNumber:this.$store.getters.staffNumber})
                .then(res=>{
                    this.staffNumber=res.data.data.staffNumber
                    this.name=res.data.data.name
                })
                .then(()=>{
                    this.loading=false
                })
           },
       }
   }
</script>
<style scoped>
.back{
    background: url("../icons/background.jpg");
    background-size:cover;
    width:100%;
    height:100%
}
.box{
    margin-top: 2%;
    width:50%;  
}
.inputBox{
    width:70%;
    margin-bottom: 2%;
}
.title{
    font-size: 32px;
    color: darkgrey;
}
</style>